<template>
  <div>
    <div class="dialog-wrap">
      <div class="block-wrap">
        <div
          class="block-item"
          @click="clickItem(0)"
          :class="{ 'color-text ': linkActive }"
        >
          <svg-icon v-show="!linkActive" icon-class="h5link" />
          <svg-icon v-show="linkActive" icon-class="h5link-active" />
          <div>h5链接</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(1)"
          :class="{ 'color-text ': posterActive }"
        >
          <svg-icon v-show="!posterActive" icon-class="poster" />
          <svg-icon v-show="posterActive" icon-class="poster-active" />
          <div>海报</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(2)"
          :class="{ 'color-text ': articleActive }"
        >
          <svg-icon v-show="!articleActive" icon-class="article" />
          <svg-icon v-show="articleActive" icon-class="article-active" />
          <div>文章</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(3)"
          :class="{ 'color-text ': fileActive }"
        >
          <svg-icon v-show="!fileActive" icon-class="file" />
          <svg-icon v-show="fileActive" icon-class="file-active" />
          <div>文件</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(4)"
          :class="{ 'color-text ': insuranceActive }"
        >
          <svg-icon v-show="!insuranceActive" icon-class="insurance" />
          <svg-icon v-show="insuranceActive" icon-class="insurance-active" />
          <div>险种</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(5)"
          :class="{ 'color-text ': localLibraryActive }"
        >
          <svg-icon v-show="!localLibraryActive" icon-class="LocalLibrary" />
          <svg-icon
            v-show="localLibraryActive"
            icon-class="local-library-active"
          />
          <div>多媒体</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(6)"
          :class="{ 'color-text ': formActive }"
        >
          <svg-icon v-show="!formActive" icon-class="form-svg" />
          <svg-icon v-show="formActive" icon-class="form-active" />
          <div>问卷</div>
        </div>
        <div
          class="block-item"
          @click="clickItem(7)"
          :class="{ 'color-text ': localUploadActive }"
        >
          <svg-icon v-show="!localUploadActive" icon-class="local-upload" />
          <svg-icon
            v-show="localUploadActive"
            icon-class="local-upload-active"
          />
          <div>本地上传</div>
        </div>
      </div>
    </div>

    <!-- 文案-上传文本 -->
    <!-- <text-upload
      :textDialog="textDialog"
      @close="closeText"
      :textUpload="textUpload"
    ></text-upload> -->
    <!-- 本地库 -->
    <!-- <source-material :sourceDialog="sourceDialog" @close="sourceClose">
    </source-material> -->
  </div>
</template>

<script>
// import {
//   textUpload,
//   sourceMaterial,
// } from "@/views/customerOperations/personalSop/component/index";
export default {
  name: "SelectMaterial",
  props: {
    selectForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // formLabel: {
    //   type: String,
    //   default: "选择素材",
    // },
  },
  // components: {
  //   textUpload,
  //   sourceMaterial,
  // },
  data() {
    return {
      selectIndex: null,
    };
  },
  computed: {
    linkActive() {
      if (this.selectIndex === 0) {
        return true;
      } else {
        return false;
      }
    },
    posterActive() {
      if (this.selectIndex === 1) {
        return true;
      } else {
        return false;
      }
    },
    articleActive() {
      if (this.selectIndex === 2) {
        return true;
      } else {
        return false;
      }
    },
    fileActive() {
      if (this.selectIndex === 3) {
        return true;
      } else {
        return false;
      }
    },
    insuranceActive() {
      if (this.selectIndex === 4) {
        return true;
      } else {
        return false;
      }
    },
    localLibraryActive() {
      if (this.selectIndex === 5) {
        return true;
      } else {
        return false;
      }
    },
    formActive() {
      if (this.selectIndex === 6) {
        return true;
      } else {
        return false;
      }
    },
    localUploadActive() {
      if (this.selectIndex === 7) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {},

  methods: {
    clickItem(index) {
      this.selectIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }
  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 400;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px 10px 6px 0;
      border: $normalBorder;
      text-align: center;
      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
        margin-top: 12px;
      }
      div {
        margin-top: -10px;
      }
    }
  }
  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 10px;
  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}

.color-text {
  color: #082aff;
  border-color: #082aff !important;
}
</style>
